<template>
  <!-- 修改密码 -->
  <div class="changePwd-container">
    <el-card class="change-card">
      <div class="title">
        <span class="desc">修改密码</span>
        <img class="icon" src="@/assets/img/item-img/changePwd.png" alt="" />
      </div>
      <div class="body">
        <el-form
          ref="changePwdRef"
          :rules="changeInfoRules"
          :model="changePwd"
          label-width="90px"
          hide-required-asterisk
        >
          <el-form-item label="原密码" prop="oldPassword">
            <el-input show-password v-model="changePwd.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="middle">
            <el-input show-password v-model="changePwd.middle"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="newPassword">
            <el-input show-password v-model="changePwd.newPassword"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-container">
          <el-button type="primary" @click="save('form')">保存</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import commonServe from '../../api/service/common.serve'
export default {
  data() {
    return {
      id: window.sessionStorage.getItem('studentId'),
      changePwd: {
        oldPassword: '',
        middle: '', //中间值
        newPassword: ''
      },
      changeInfoRules: {
        oldPassword: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        middle: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请确认新密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    save() {
      this.$refs.changePwdRef.validate(async (valid) => {
        if (!valid) return
        if (this.changePwd.middle !== this.changePwd.newPassword)
          return this.$message.warning('两次输入的新密码不一致，请重新输入密码')
        let params = {
          oldPassword: this.changePwd.oldPassword,
          newPassword: this.changePwd.newPassword
        }
        commonServe.changePassword(this.id, params).then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('密码修改成功，请重新登录')
            this.$router.push('/')
            window.sessionStorage.clear()
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.changePwd-container {
  .change-card {
    .title {
      display: flex;
      align-items: center;
      .desc {
        font-size: 30px;
        color: #3a62d7;
        letter-spacing: 10px;
        font-weight: bold;
        text-shadow: 2px 2px 5px #999;
      }
      .icon {
        width: 40px;
        height: 40px;
      }
      .icon:hover {
        transform: translateY(-5px);
        transition: 0.5s;
      }
    }
    .body {
      padding: 0 200px;
      .el-form {
        padding-top: 100px;
        .el-form-item {
          padding-top: 20px;
        }
      }
      .btn-container {
        padding: 200px 20px 0 80px;
        .el-button {
          width: 100%;
          color: #fff;
        }
      }
    }
  }
}
</style>
